<template>
  <div>
    <h1>App</h1>
    <!-- <TsPay @click.native="say"></TsPay> -->
    <h2>当前页：{{ num }}</h2>
    <h2>每页条数: {{ count }}</h2>
    <h2>
      {{ obj }}
    </h2>
    <!-- <TsPage :active="num" @update:active="num = $event"></TsPage> -->
    <!-- 语法糖 -->
    <!-- <TsPage :active.sync="num" :size="count" @update:size="count = $event"></TsPage> -->
    <!-- <TsPage :active.sync="num" :size.sync="count"></TsPage> -->
    <TsPage v-bind.sync="obj"></TsPage>
  </div>
</template>
<script>
import TsButton from './components/TsButton.vue';
import TsSubmit from './components/TsSubmit.vue';
import TsInput from './components/TsInput.vue';
import TsPay from './components/TsPay.vue';
import TsPage from './components/TsPage.vue';
export default {
  methods: {
    say() {
      console.log('say hello');
    }
  },
  data() {
    return {
      obj: {
        size: 30,
        active: 2
      },
      count: 20,
      num: 1
    }
  },
  components: {
    TsButton,
    TsSubmit,
    TsInput,
    TsPay,
    TsPage
  }
}
</script>
<style>
div {
  border: solid;
  padding: 10px;
  margin: 10px;
}
</style>